<template>
  <div class="about">
    <el-container>
            <el-main>
                <el-row class="youhaohuo" :gutter="20">
                  <h2><img class="title" :src="res.youhaohuo.title.pic" :alt="res.youhaohuo.title.h2">
                      <small>{{ res.youhaohuo.title.small }}</small>
                  </h2>
                  <el-col :span="4" v-for="(item,index) in res.youhaohuo.pics" :key="index">
                    <a href="">
                      <img class="youimg" :src="item.src" alt="">
                      <p class="tit_p">{{ item.jie }}</p>
                      <span>{{ item.spans }}</span>
                      <p class="ping_p"><i class="el-icon-loading"></i>{{ item.ping }}</p>
                    </a>
                  </el-col>
                </el-row>
            </el-main>
    </el-container>
    <el-container>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <h2><img class="title" :src="res.meirihaodian.title.pic" :alt="res.meirihaodian.title.h2">
                            <small>{{ res.meirihaodian.title.small }}</small></h2>
                        <el-row :gutter="10">
                            <el-col :span="12" v-for="(item,index) in res.meirihaodian.pics" :key="index">
                                <h3>{{ item.title }}</h3>
                                <el-row :gutter="2">
                                    <el-col :span="16">
                                        <a href="">
                                            <img class="pic" :src="item.imgs[0].src" alt="">
                                        </a>
                                    </el-col>
                                    <el-col :span="8">
                                        <a href="" class="mb-2">
                                            <img class="pic2" :src="item.imgs[1].src" alt="">
                                        </a>
                                        <a href="">
                                            <img class="pic2" :src="item.imgs[2].src" alt="">
                                        </a>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <h2><img class="title" :src="res.taobaozhibo.title.pic" :alt="res.taobaozhibo.title.h2"> <small>{{ res.taobaozhibo.title.small }}</small></h2>
                        <el-row :gutter="10">
                            <el-col :span="12" v-for="(item,index) in res.taobaozhibo.pics" :key="index">
                                <h3>{{ item.title }} <small>{{ item.see }}</small></h3>
                                <el-row :gutter="2">
                                    <el-col :span="16">
                                        <a href="">
                                            <img class="pic" :src="item.imgs[0].src" alt="">
                                        </a>
                                    </el-col>
                                    <el-col :span="8">
                                        <a href="" class="mb-2">
                                            <img class="pic2" :src="item.imgs[1].src" alt="">
                                        </a>
                                        <a href="">
                                            <img class="pic2" :src="item.imgs[2].src" alt="">
                                        </a>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>


  </div>
</template>

<script>
//模拟请求到的数据
    let dataSource = {
        "youhaohuo": {
          "title": {
            "pic": require("../assets/taobao/youhaohuo/title-1.jpg"),
            "h2": "有好货",
            "small": "与品质生活不期而遇",
          },
          "pics": [
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/01.jpg"),
              "jie": "大豆家  方头奶奶鞋",
              "spans": "一脚蹬设计，方便日常的",
              "ping": "3758 人说好"
            },
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/02.jpg"),
              "jie": "佳宝路转角水槽",
              "spans": "304不锈钢，表面光洁坚固",
              "ping": "123 人说好"
            },
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/03.jpg"),
              "jie": "肖优秀真皮细高跟过膝",
              "spans": "细跟尖头设计更显优雅女",
              "ping": "68 人说好"
            },
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/04.jpg"),
              "jie": "好利来黑天鹅蛋糕",
              "spans": "材料新鲜分量充足，奶香",
              "ping": "8 人说好"
            },
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/05.jpg"),
              "jie": "汽车盲点变道辅助系",
              "spans": "行车安全盲区监测系统，",
              "ping": "24 人说好"
            },
            {
              "link": "",
              "src": require("../assets/taobao/youhaohuo/06.jpg"),
              "jie": "PUMA 芥末绿复古老爹鞋",
              "spans": "芥末绿色的鞋面视觉上给",
              "ping": "7 人说好"
            }
          ]
        },
        "meirihaodian": {
            "title": {
                "pic": require("../assets/taobao/title1.png"),
                "h2": "每日好店",
                "small": "发现深藏的好店"
            },
            "pics": [{
                    "title": "万能集市",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/1.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/2.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/3.jpg")
                        }
                    ]
                },
                {
                    "title": "淘宝江湖",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/4.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/5.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/6.jpg")
                        }
                    ]
                },
                {
                    "title": "深藏不露",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/7.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/8.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/9.jpg")
                        }
                    ]
                },
                {
                    "title": "高手林立",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/10.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/11.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/12.jpg")
                        }
                    ]
                }
            ]
        },
        "taobaozhibo": {
            "title": {
                "pic": require("../assets/taobao/title2.png"),
                "h2": "淘宝直播",
                "small": "你的爱豆直播等你哟！"
            },
            "pics": [{
                    "title": "aj1黑脚趾",
                    "see": "10382观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/13.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/14.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/15.jpg")
                        }
                    ]
                },
                {
                    "title": "青青河边草真皮",
                    "see": "8965观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/16.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/17.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/18.jpg")
                        }
                    ]
                },
                {
                    "title": "涵木家",
                    "see": "4412观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/19.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/20.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/21.jpg")
                        }
                    ]
                },
                {
                    "title": "厂家优品",
                    "see": "5771观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/taobao/22.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/23.jpg")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobao/24.jpg")
                        }
                    ]
                }
            ]
        }
        
    };

    export default {
        data() {
            return {
                res: dataSource
            };
        }
    };
</script>

<style scoped>
.el-container {
        width: 1200px;
        margin: auto;
    }

    h3 {
        font-size: 16px;
        font-weight: 300;
    }

    small {
        font-size: 12px;
        color: #999;
        font-weight: 300;
    }

    a {
        display: block;
    }

    img {
        display: block;
        width: 100%;
    }

    .pic {
        height: 180px;
    }

    .pic2 {
        height: 89px;
    }

    .mb-2 {
        margin-bottom: 2px;
    }

    .title {
        height: 24px;
        display: inline-block;
        width: auto;
    }

    h2 small {
        position: relative;
        top: -8px;
    }
    .youimg{
      margin: auto;
      height: 148px;
      width: 148px;
    }
    .youhaohuo a{
      text-decoration: none;
    }
    .youhaohuo span{
      display: block;
      color: rgb(175, 175, 175);
      font-size: 14px;
      margin-top: 15px;
    }
    .youhaohuo p {
      display: block;
      font-size: 15px;
      margin-top: 15px;
    }
    .tit_p {
      color: rgb(68, 67, 67);
    }
    .ping_p {
      color: lightskyblue;
    }
    
</style>